<template>
  <page-header-wrapper>
    <a-row style="background: white;">
      <a-col :span="6">
        <div style="width: 300px;border: 1px dashed #666666;height: 600px;overflow-y: scroll" class="overscroll">
          <div style="height: 40px;line-height: 40px;text-align: center;">用户中心</div>
          <div
            style="width: 100%;height: 120px;background-size: 100% 100%;position: relative;"
            :style="{background: 'url(' + formData.user_center_bg + ') no-repeat'}"
          >
            <div
              style="top: 20px; left: 30px;position: absolute;"
              v-if="formData.top_style == 0"
            >
              <div style="float: left;width: 50px;height:50px;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;background-color: #fff"></div>
              <div style="line-height: 30px;float: left;margin-left: 10px;color: #ffffff;font-weight: bold;font-size: 16px;">用户昵称</div>
            </div>
            <div
              style="top:20px;left: 0; position :absolute;width: 100%; text-align: center;"
              v-if="formData.top_style == 1"
            >
              <div style="width: 50px;height:50px;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;background-color: #fff;display: inline-block;"></div>
              <div style="line-height: 30px;color: #ffffff;font-weight: bold;font-size: 16px;">用户昵称</div>
            </div>
            <div
              style="top: 40px; left: 30px;position: absolute;"
              v-if="formData.top_style == 2"
            >
              <div style="margin: 0 auto;width: 220px;height: 60px;background: #ffffff;border-radius: 6px;">
                <div style="float: left;width: 50px;height:50px;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;background: rgb(227, 227, 227);margin-top: 5px;margin-left: 5px;"></div>
                <div style="line-height: 30px;float: left;margin-left: 10px;color: #666666;font-weight: bold;font-size: 16px;line-height: 45px;">用户昵称</div>
              </div>
            </div>
          </div>
          <div v-if="formData.is_wallet == 1">
            <a-card
              title="我的钱包"
              style="width: 100%;background-color: #F5F5F5;"
              size="small"
            >
              <div style="width: 33.3%;float: left;text-align: center;">
                <div style="width: 30px;height: 30px;margin: 0 auto;">
                  <img
                    :src="formData.wallets.status_1.icon"
                    width="100%"
                    height="100%"
                    alt=""
                  >
                </div>
                <div>{{ formData.wallets.status_1.text }}</div>
              </div>
              <div style="width: 33.3%;float: left;text-align: center;">
                <div style="width: 30px;height: 30px;margin: 0 auto;">
                  <img
                    :src="formData.wallets.status_0.icon"
                    width="100%"
                    height="100%"
                    alt=""
                  >
                </div>
                <div>{{ formData.wallets.status_0.text }}</div>
              </div>
              <div style="width: 33.3%;float: left;text-align: center;">
                <div style="width: 30px;height: 30px;margin: 0 auto;">
                  <img
                    :src="formData.wallets.status_2.icon"
                    width="100%"
                    height="100%"
                    alt=""
                  >
                </div>
                <div>{{ formData.wallets.status_2.text }}</div>
              </div>
            </a-card>
            <div style="clear: both;"></div>
          </div>
          <div v-if="formData.is_order == 1">
            <a-card
              title="全部订单"
              style="width: 100%;background-color: #F5F5F5;"
              size="small"
            >
              <div style="width: 20%;float: left;text-align: center;">
                <div style="width: 20px;height: 20px;margin: 0 auto;">
                  <img
                    :src="formData.orders.status_0.icon"
                    width="100%"
                    height="100%"
                    alt=""
                  >
                </div>
                <div> {{ formData.orders.status_0.text }} </div>
              </div>
              <div style="width: 20%;float: left;text-align: center;">
                <div style="width: 20px;height: 20px;margin: 0 auto;">
                  <img
                    :src="formData.orders.status_1.icon"
                    width="100%"
                    height="100%"
                    alt=""
                  >
                </div>
                <div> {{ formData.orders.status_1.text }} </div>
              </div>
              <div style="width: 20%;float: left;text-align: center;">
                <div style="width: 20px;height: 20px;margin: 0 auto;">
                  <img
                    :src="formData.orders.status_2.icon"
                    width="100%"
                    height="100%"
                    alt=""
                  >
                </div>
                <div> {{ formData.orders.status_2.text }} </div>
              </div>
              <div style="width: 20%;float: left;text-align: center;">
                <div style="width: 20px;height: 20px;margin: 0 auto;">
                  <img
                    :src="formData.orders.status_3.icon"
                    width="100%"
                    height="100%"
                    alt=""
                  >
                </div>
                <div> {{ formData.orders.status_3.text }} </div>
              </div>
              <div style="width: 20%;float: left;text-align: center;">
                <div style="width: 20px;height: 20px;margin: 0 auto;">
                  <img
                    :src="formData.orders.status_4.icon"
                    width="100%"
                    height="100%"
                    alt=""
                  >
                </div>
                <div> {{ formData.orders.status_4.text }} </div>
              </div>
            </a-card>
            <div style="clear: both;"></div>
          </div>
          <div
            style="width: 100%;background-color: #ffffff;"
            v-if="formData.is_menu == 1 && formData.menu_style == 0"
          >
            <vuedraggable class="wrapper" v-model="formData.menus">
              <div style="width: 100%;height: 40px;line-height: 40px;border-bottom: 1px solid #e8e8e8;" v-for="(item, index) in formData.menus" :key="index">
                <div style="width: 20px;height: 20px; float: left;margin-left: 10px;">
                  <img
                    width="100%"
                    height="100%"
                    :src="item.icon"
                    alt=""
                  >
                </div>
                <div style="height: 20px;float: left;margin-left: 10px;">{{ item.name }}</div>
              </div>
            </vuedraggable>
          </div>

          <div style="width: 100%;background-color: #ffffff;" v-if="formData.is_menu == 1 && formData.menu_style == 1">
            <vuedraggable class="wrapper" v-model="formData.menus">
              <div style="width: 25%;float: left;text-align: center;" v-for="(item, index) in formData.menus" :key="index">
                <div style="width: 20px;height: 20px;margin: 0 auto;">
                  <img
                    :src="item.icon"
                    width="100%"
                    height="100%"
                    alt=""
                  >
                </div>
                <div>{{ item.name }}</div>
              </div>
            </vuedraggable>
            <div style="clear: both;"></div>
          </div>
          <div style="clear: both;"></div>
          <div style="width: 100%; padding: 10px 20px;text-align: center;">
            <div style="width: 20px;height: 20px;margin: 0 auto;">
              <img
                src="http://tianxin100we10.cyyvip.com/web/uploads/image/store_1/0166c7da6ab29de8dff8c27ca5a88951629b1b45.png"
                width="100%"
                height="100%"
                alt=""
              >
            </div>
            <div>甜心100版权所有</div>
          </div>
        </div>
      </a-col>
      <a-col
        :span="16"
        :offset="1"
      >
        <a-form
          :wrapper-col="{ span: 12 }"
          :label-col="{ span: 5 }"
          @submit="handleSubmit"
        >
          <a-form-item label="头部背景图片">
            <storage-select
              size="small"
              placeholder="请选择头部背景图片"
              v-model="formData.user_center_bg"
            ></storage-select>
          </a-form-item>
          <a-form-item label="头部样式">
            <a-radio-group
              v-model="formData.top_style"
              size="small"
            >
              <a-radio :value="0">
                样式一
              </a-radio>
              <a-radio :value="1">
                样式二
              </a-radio>
              <a-radio :value="2">
                样式三
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="订单栏">
            <a-radio-group
              v-model="formData.is_order"
              size="small"
            >
              <a-radio :value="0">
                隐藏
              </a-radio>
              <a-radio :value="1">
                显示
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="订单栏">
            <div
              style="width: 20%;float: left;text-align: center;border: 1px solid rgb(232, 232, 232);"
              @click="modelShow('待付款')"
            >
              <div style="width: 20px;height: 20px;margin: 0 auto;">
                <img
                  :src="formData.orders.status_0.icon"
                  width="100%"
                  height="100%"
                  alt=""
                >
              </div>
              <div> {{ formData.orders.status_0.text }} </div>
            </div>
            <div
              style="width: 20%;float: left;text-align: center;border: 1px solid rgb(232, 232, 232);"
              @click="modelShow('待发货')"
            >
              <div style="width: 20px;height: 20px;margin: 0 auto;">
                <img
                  :src="formData.orders.status_1.icon"
                  width="100%"
                  height="100%"
                  alt=""
                >
              </div>
              <div> {{ formData.orders.status_1.text }} </div>
            </div>
            <div
              style="width: 20%;float: left;text-align: center;border: 1px solid rgb(232, 232, 232);"
              @click="modelShow('待收货')"
            >
              <div style="width: 20px;height: 20px;margin: 0 auto;">
                <img
                  :src="formData.orders.status_2.icon"
                  width="100%"
                  height="100%"
                  alt=""
                >
              </div>
              <div> {{ formData.orders.status_2.text }} </div>
            </div>
            <div
              style="width: 20%;float: left;text-align: center;border: 1px solid rgb(232, 232, 232);"
              @click="modelShow('已完成')"
            >
              <div style="width: 20px;height: 20px;margin: 0 auto;">
                <img
                  :src="formData.orders.status_3.icon"
                  width="100%"
                  height="100%"
                  alt=""
                >
              </div>
              <div> {{ formData.orders.status_3.text }} </div>
            </div>
            <div
              style="width: 20%;float: left;text-align: center;border: 1px solid rgb(232, 232, 232);"
              @click="modelShow('售后')"
            >
              <div style="width: 20px;height: 20px;margin: 0 auto;">
                <img
                  :src="formData.orders.status_4.icon"
                  width="100%"
                  height="100%"
                  alt=""
                >
              </div>
              <div> {{ formData.orders.status_4.text }} </div>
            </div>
          </a-form-item>
          <a-form-item label="我的钱包">
            <a-radio-group
              v-model="formData.is_wallet"
              size="small"
            >
              <a-radio :value="0">
                隐藏
              </a-radio>
              <a-radio :value="1">
                显示
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="我的钱包">
            <div
              style="width: 20%;float: left;text-align: center;border: 1px solid rgb(232, 232, 232);"
              @click="modelShow('余额')"
            >
              <div style="width: 20px;height: 20px;margin: 0 auto;">
                <img
                  :src="formData.wallets.status_1.icon"
                  width="100%"
                  height="100%"
                  alt=""
                >
              </div>
              <div> {{ formData.wallets.status_1.text }} </div>
            </div>
            <div
              style="width: 20%;float: left;text-align: center;border: 1px solid rgb(232, 232, 232);"
              @click="modelShow('积分')"
            >
              <div style="width: 20px;height: 20px;margin: 0 auto;">
                <img
                  :src="formData.wallets.status_0.icon"
                  width="100%"
                  height="100%"
                  alt=""
                >
              </div>
              <div> {{ formData.wallets.status_0.text }} </div>
            </div>
            <div
              style="width: 20%;float: left;text-align: center;border: 1px solid rgb(232, 232, 232);"
              @click="modelShow('我的钱包')"
            >
              <div style="width: 20px;height: 20px;margin: 0 auto;">
                <img
                  :src="formData.wallets.status_2.icon"
                  width="100%"
                  height="100%"
                  alt=""
                >
              </div>
              <div> {{ formData.wallets.status_2.text }} </div>
            </div>
          </a-form-item>
          <a-form-item label="手动授权手机号">
            <a-radio-group
              v-model="formData.manual_mobile_auth"
              size="small"
            >
              <a-radio :value="0">
                关闭
              </a-radio>
              <a-radio :value="1">
                开启
              </a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="菜单栏">
            <a-radio-group
              v-model="formData.is_menu"
              size="small"
            >
              <a-radio :value="0">
                隐藏
              </a-radio>
              <a-radio :value="1">
                显示
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="菜单栏样式">
            <a-radio-group
              v-model="formData.menu_style"
              size="small"
            >
              <a-radio :value="0">
                列表形式
              </a-radio>
              <a-radio :value="1">
                九宫格形式
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="菜单栏">
            <div style="width: 300px;border: 1px solid #e8e8e8;">
              <a-row style="text-align: right;background-color: white;padding-right: 20px;border-bottom: 1px solid #e8e8e8;">
                <a-button type="primary" @click="addMenusVisiable = true" size="small">添加</a-button>
              </a-row>
              <a-row style="background: #f6f8f9;padding: 2px 5px;max-height: 400px; overflow-y: scroll;" class="overscroll">
                <div style="width: 100%;height: 40px;line-height: 40px;border-bottom: 1px solid #e8e8e8;background: #ffffff;padding: 2px 5px;" v-for="(item, index) in formData.menus" :key="index">
                  <div style="width: 20px;height: 20px;margin: 0 auto;float: left;">
                    <img
                      :src="item.icon"
                      width="100%"
                      height="100%"
                      alt=""
                    >
                  </div>
                  <div style="height: 20px;float: left;margin-left: 10px;">{{ item.name }}</div>
                  <div style="float: right">
                    <a-button type="default" size="small" style="margin-right: 10px;" @click="editMenusShow(index)">编辑</a-button>
                    <a-button type="primary" size="small" @click="delMenus(index)">删除</a-button>
                  </div>
                </div>
              </a-row>
            </div>
          </a-form-item>
          <a-form-item style="text-align: center;">
            <a-button type="primary" @click="handleSubmit">保存</a-button>
          </a-form-item>
        </a-form>
        <a-modal
          :title="showFormData.title"
          :visible="showFormData.visiable"
          @ok="handleOk"
          @cancel="showCancel()"
        >
          <a-form
            :wrapper-col="{ span: 12 }"
            :label-col="{ span: 5 }"
          >
            <a-form-item :label="showFormData.title + '图标'">
              <storage-select
                size="small"
                :placeholder="'请选择' + showFormData.title + '图标'"
                v-model="showFormData.icon"
              ></storage-select>
            </a-form-item>
            <a-form-item :label="showFormData.title + '标题'">
              <a-input
                v-model="showFormData.text"
                :placeholder="'请输入' + showFormData.title + '标题'"
              >
              </a-input>
            </a-form-item>
          </a-form>
        </a-modal>
        <a-modal
          title="添加菜单"
          :visible="addMenusVisiable"
          @ok="handleOk"
          :width="300"
          :footer="null"
          @cancel="addMenusVisiable = false"
        >
          <a-row style="background: #f6f8f9;padding: 2px 5px;max-height: 400px; overflow-y: scroll;" class="overscroll">
            <div style="width: 100%;height: 40px;line-height: 40px;border-bottom: 1px solid #e8e8e8;background: #ffffff;padding: 2px 5px;" v-for="(item, index) in menu_list" :key="index">
              <div style="width: 20px;height: 20px;margin: 0 auto;float: left;">
                <img
                  :src="item.icon"
                  width="100%"
                  height="100%"
                  alt=""
                >
              </div>
              <div style="height: 20px;float: left;margin-left: 10px;">{{ item.name }}</div>
              <div style="float: right">
                <a-button type="primary" size="small" @click="addMenus(index)">添加</a-button>
              </div>
            </div>
          </a-row>
        </a-modal>
        <a-modal
          :title="editMenusData.title"
          :visible="editMenusData.visiable"
          @ok="editMenusConfirm"
          @cancel="showtMenusCancel()"
        >
          <a-form
            :wrapper-col="{ span: 12 }"
            :label-col="{ span: 5 }"
          >
            <a-form-item label="图标">
              <storage-select
                size="small"
                placeholder="请选择图标"
                v-model="editMenusData.icon"
              ></storage-select>
            </a-form-item>
            <a-form-item label="标题1">
              <a-input
                v-model="editMenusData.name"
                placeholder="请输入标题1"
              >
              </a-input>
            </a-form-item>
            <a-form-item v-if="editMenusData.name_1" :label="'标题2'">
              <a-input
                v-model="editMenusData.name_1"
                placeholder="请输入标题2"
              >
              </a-input>
            </a-form-item>
          </a-form>
        </a-modal>
      </a-col>
    </a-row>
  </page-header-wrapper>
</template>

<script>
import { userCenterList, userCenterEdit } from '@/api/user_center'
import vuedraggable from 'vuedraggable'
export default {
  name: 'DiyPageList',
  components: {
    userCenterList,
    vuedraggable,
    userCenterEdit
  },
  data () {
    return {
      formData: {
        user_center_bg: 'http://tianxin100we10.cyyvip.com/web/uploads/image/store_1/23b8c05e69760fd60c865de9723de5b0deb1cf38.png',
        top_style: 0,
        is_order: 1,
        orders: {
          status_0: {
            icon: 'http://tianxin100we10.cyyvip.com/web/uploads/image/store_1/e6ef3dc9655c1d0f1ccca61ddc60796940989e14.png',
            text: '待付款'
          },
          status_1: {
            icon: 'http://tianxin100we10.cyyvip.com/web/uploads/image/store_1/398cf580f39a7a4e3cc01344b431ae6d92856a2c.png',
            text: '待发货'
          },
          status_2: {
            icon: 'http://tianxin100we10.cyyvip.com/web/uploads/image/store_1/6a803073d812c0d214d914647cc03c57ab1ca47c.png',
            text: '待收货'
          },
          status_3: {
            icon: 'http://tianxin100we10.cyyvip.com/web/uploads/image/store_1/441d88d7b9fb1bebd3797970b86bc4c96af328e5.png',
            text: '已完成'
          },
          status_4: {
            icon: 'http://tianxin100we10.cyyvip.com/web/uploads/image/store_1/7c49d2df4607a426b47939f5a4579c37bfa92e58.png',
            text: '售后'
          }
        },
        is_wallet: 1,
        wallets: {
          status_0: {
            icon: 'http://tianxin100we10.cyyvip.com/web/uploads/image/store_1/e6ef3dc9655c1d0f1ccca61ddc60796940989e14.png',
            text: '积分'
          },
          status_1: {
            icon: 'http://tianxin100we10.cyyvip.com/web/uploads/image/store_1/398cf580f39a7a4e3cc01344b431ae6d92856a2c.png',
            text: '余额'
          },
          status_2: {
            icon: 'http://tianxin100we10.cyyvip.com/web/uploads/image/store_1/6a803073d812c0d214d914647cc03c57ab1ca47c.png',
            text: '我的钱包'
          }
        },
        menu_style: 0,
        is_menu: 1,
        manual_mobile_auth: 1,
        menus: []
      },
      menu_list: [],
      showFormData: {
        visiable: false,
        img: '',
        text: '',
        title: ''
      },
      editMenusData: {
        visiable: false,
        icon: '',
        name: '',
        name_1: '',
        index: null
      },
      addMenusVisiable: false,
      loadData: parameter => {
        var that = this
        return userCenterList(parameter)
          .then(res => {
            if (res.data) that.formData = res.data
            that.menu_list = res.menu_list
            return res.data
          })
      }
    }
  },
  async created () {
     await this.loadData()
     this.menusInit()
  },
  methods: {
    handleSubmit () {
      const hide = this.$message.loading('请求中...', 0)
      userCenterEdit({
        data: JSON.stringify(this.formData)
        // data: this.formData
      }).then(res => {
        hide()
        if (res.code === 0) {
          this.$message.success('操作成功！')
          this.loadData()
        }
      }).catch(err => {
        this.$message.error(err.message)
        this.modalLoading = false
      })
    },
    menusInit () {
      const menus = this.formData.menus
      const menulist = this.menu_list
      for (const i in menulist) {
        for (const j in menus) {
          if (menulist[i].id === menus[j].id) {
            this.menu_list.splice(i, 1)
          }
        }
      }
    },
    delMenus (index) {
      this.menu_list.push(this.formData.menus[index])
      this.formData.menus.splice(index, 1)
    },
    addMenus (index) {
      this.formData.menus.push(this.menu_list[index])
      this.menu_list.splice(index, 1)
    },
    editMenusShow (index) {
      const menus = this.formData.menus[index]
      Object.assign(this.editMenusData, {
        icon: menus.icon,
        name: menus.name,
        name_1: menus.name_1 || '',
        index: index,
        visiable: true
      })
    },
    editMenusConfirm () {
      Object.assign(this.formData.menus[this.editMenusData.index], {
        icon: this.editMenusData.icon,
        name: this.editMenusData.name,
        name_1: this.editMenusData.name_1 || ''
      })
      this.showtMenusCancel()
    },
    addMenusShow () {
      this.menu_visiable = true
    },
    handleOk () {
      switch (this.showFormData.title) {
        case '待付款':
          Object.assign(this.formData.orders.status_0, {
            icon: this.showFormData.icon,
            text: this.showFormData.text
          })
          break
        case '待发货':
          Object.assign(this.formData.orders.status_1, {
            icon: this.showFormData.icon,
            text: this.showFormData.text
          })
          break
        case '待收货':
          Object.assign(this.formData.orders.status_2, {
            icon: this.showFormData.icon,
            text: this.showFormData.text
          })
          break
        case '已完成':
          Object.assign(this.formData.orders.status_3, {
            icon: this.showFormData.icon,
            text: this.showFormData.text
          })
          break
        case '售后':
          Object.assign(this.formData.orders.status_4, {
            icon: this.showFormData.icon,
            text: this.showFormData.text
          })
          break
        case '积分':
          Object.assign(this.formData.wallets.status_0, {
            icon: this.showFormData.icon,
            text: this.showFormData.text
          })
          break
        case '余额':
          Object.assign(this.formData.wallets.status_1, {
            icon: this.showFormData.icon,
            text: this.showFormData.text
          })
          break
        case '我的钱包':
          Object.assign(this.formData.wallets.status_2, {
            icon: this.showFormData.icon,
            text: this.showFormData.text
          })
          break
      }
      this.showCancel()
    },
    showCancel () {
      Object.assign(this.showFormData, {
        visiable: false,
        icon: '',
        text: '',
        title: ''
      })
    },
    showtMenusCancel () {
      Object.assign(this.editMenusData, {
        visiable: false,
        icon: '',
        name: '',
        name_1: '',
        index: null
      })
    },
    modelShow (type) {
      console.log(type)
      switch (type) {
        case '待付款':
          Object.assign(this.showFormData, {
            visiable: true,
            title: type,
            icon: this.formData.orders.status_0.icon,
            text: this.formData.orders.status_0.text
          })
          break
        case '待发货':
          Object.assign(this.showFormData, {
            visiable: true,
            title: type,
            icon: this.formData.orders.status_1.icon,
            text: this.formData.orders.status_1.text
          })
          break
        case '待收货':
          Object.assign(this.showFormData, {
            visiable: true,
            title: type,
            icon: this.formData.orders.status_2.icon,
            text: this.formData.orders.status_2.text
          })
          break
        case '已完成':
          Object.assign(this.showFormData, {
            visiable: true,
            title: type,
            icon: this.formData.orders.status_3.icon,
            text: this.formData.orders.status_3.text
          })
          break
        case '售后':
          Object.assign(this.showFormData, {
            visiable: true,
            title: type,
            icon: this.formData.orders.status_4.icon,
            text: this.formData.orders.status_4.text
          })
          break
        case '积分':
          Object.assign(this.showFormData, {
            visiable: true,
            title: type,
            icon: this.formData.wallets.status_0.icon,
            text: this.formData.wallets.status_0.text
          })
          break
        case '余额':
          Object.assign(this.showFormData, {
            visiable: true,
            title: type,
            icon: this.formData.wallets.status_1.icon,
            text: this.formData.wallets.status_1.text
          })
          break
        case '我的钱包':
          Object.assign(this.showFormData, {
            visiable: true,
            title: type,
            icon: this.formData.wallets.status_2.icon,
            text: this.formData.wallets.status_2.text
          })
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
.overscroll::-webkit-scrollbar {
  display: none;
}
</style>
